<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap@3.3.4/css/bootstrap.css">
    <style>
        *{
            margin:0;
            padding: 0;
            text-align: center;
        }
        input{
            width: 85%;
            height: 40px;
            border-radius: 5px;
            margin-top:30px;
            text-align: left;
            outline: none;
            padding-left: 10px;
        }
        input[type=submit]{
            width: 100px;
            height: 40px;
            text-align: center;
            font-size: 25px;
            outline: none;
            border:none;
        }
        table{
            width: 90%;
            text-align: center;
            margin:auto;
            margin-top: 60px;
        }
        tr{
            width: 25%;
            height: 30px;
            font-size: 25px;
        }
        label{
            font-size: 25px;
            line-height: 30px;
        }
        button{
            width: 45%;
            height: 25px;
            margin:5px;
        }
        .box{
            width: 100%;
            height: 100%;
            text-align: center;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: none;
        }
        .b1{
            color: red;
        }
    </style>
</head>
<body>
    <div class="big">
    <label for="input">名字:</label>
    <input type="text" class="txt" value=""><br>
    <label for="input">电话:</label>
    <input type="tel" class="tel" value=""><br>
    <label for="input">邮箱:</label>
    <input type="email" class="ema" value=""><br>
    <input type="submit" value="保存" class="b1">
    <table class="table table-condensed table-bordered table-striped">
        <thead >
            <tr>
                <td id="na">名字</td>
                <td id="te">电话</td>
                <td id="em">邮箱</td>
                <td id="ad">删改</td>
            </tr>
        </thead>       
        <tbody>

        </tbody>
    </table>
    <div class="box">
            <label for="input">名字:</label>
            <input type="text" class="txt1" value=""><br>
            <label for="input">电话:</label>
            <input type="tel" class="tel1" value=""><br>
            <label for="input">邮箱:</label>
            <input type="email" class="eam1" value=""><br>
            <input type="submit" value="保存" class="editSave1111">
    </div>
</div>
</body>
<script>
    var btn = document.querySelector("input[type=submit]");

    var inps = document.querySelectorAll("input");
    var table = document.querySelector("table");
    
 
    btn.onclick = function(e){
        var tbo = document.querySelector("table tbody");
        e.preventDefault();
        var na = inps[0].value;
        var te = inps[1].value;
        var em = inps[2].value;
        var obj = {
            na:na,
            te:te,
            em:em
        }
        var all = localStorage.getItem('list')
        if(all){
            all = JSON.parse(all);
            all.push(obj);
            localStorage.setItem('list',JSON.stringify(all))
        }else{
            localStorage.setItem('list',JSON.stringify([obj]))
        }
        var str = `
        <tr>
            <td>${obj.na}</td>
            <td>${obj.te}</td>
            <td>${obj.em}</td>
             <td><button class="delBtn">删除</button><button class="editBtn">修改</button></td>
        </tr>
        `
        tbo.innerHTML+=str;
        inps[0].value='';
        inps[1].value='';
        inps[2].value='';
    }
    rander();
    function rander(){
        var tbo = document.querySelector("table tbody");
        all = JSON.parse(localStorage.getItem('list'))
        console.log(all);
        if(all){
            all.forEach(element => {
                var str = `
                <tr>
                    <td>${element.na}</td>
                    <td>${element.te}</td>
                    <td>${element.em}</td>
                    <td><button class="delBtn">删除</button><button class="editBtn">修改</button></td>
                </tr>
                `
                console.log(element);
                tbo.innerHTML +=str;
            });
        }
    }


    tb.addEventListener('click',function(e){    
        var tbo = document.querySelector("table tbody");   
        var event = e || window.event;
        var target = event.target || event.srcElement;
        console.log(target);
        console.log(target.nodeName);
        console.log(target.className)
        if(target.className === 'delBtn'){
            var tr = e.target.parentNode.parentNode;
            console.log(tr.rowIndex);
            var index = tr.rowIndex - 1;
            console.log(tbo.rows);
            tr.remove();
            var all=localStorage.getItem('list')
            all=JSON.parse(all);            
            all.splice(index,1)
            localStorage.setItem('list',JSON.stringify(all))

        }
       
       
    })

    table.addEventListener('click',function(e){        
        var event = e || window.event;
        var target = event.target || event.srcElement;
        if(target.className === 'editBtn'){
            var box = document.querySelector('.box');
            box.style.display = 'block';
            var tr = target.parentNode.parentNode;
            var index = tr.rowIndex - 1;
            console.log(index);
            var all = localStorage.getItem('list');
            all = JSON.parse(all);
            var obj = all[index];
            console.log(obj);
            obj.index = index;
            sessionStorage.setItem('listEdit',JSON.stringify(obj));
        
            inps[4].value=obj.na;
            inps[5].value=obj.te;
            inps[6].value=obj.em;
        }
    })

    console.log('----'+inps[7])
    var eidtSave = document.querySelector('.editSave1111');
    console.log('----'+eidtSave)
    inps[7].onclick = function(e){
        var tbo = document.querySelector("table tbody");
        e.preventDefault();
        var all = localStorage.getItem('list');
        all = JSON.parse(all);
        var obj2 = sessionStorage.getItem('listEdit');
        obj2 = JSON.parse(obj2);
        console.log(all)
        console.log(obj2)
        var obj1 = {
            na:inps[4].value,
            te:inps[5].value,
            em:inps[6].value
        }
        console.log(obj1);
        all.splice(obj2.index,1,obj1);

        console.log(all);
        localStorage.setItem('list',JSON.stringify(all));
        console.log(tbo.rows[obj2.index]);
        
        var nodeOld = tbo.rows[obj2.index];
        var nodeNew = document.createElement('tr');
        var str = `
                <tr>
                    <td>${obj1.na}</td>
                    <td>${obj1.te}</td>
                    <td>${obj1.em}</td>
                    <td><button class="delBtn">删除</button><button class="editBtn">修改</button></td>
                </tr>
                `;
        nodeNew.innerHTML = str;

        console.log(nodeNew);
        tbo.replaceChild(nodeNew,nodeOld);

      
        var box = document.querySelector('.box');
        box.style.display = 'none';
 
    }
    table.addEventListener('click',function(e){
             var event = e || window.event;
             var target = event.target ||event.srcElement;
            //  console.log(target);
            //  console.log(target.className);
             if(target.className == 'delete'){
                 var tr = target.parentNode.parentNode;
                //  console.log(tr);
                //  console.log(tbo.rows);
                //  console.log(tr.rowIndex);
                 var index = tr.rowIndex-1;
                 //在删除之前找index，删之后就找不到
                 tr.remove();
                 var all = localStorage.getItem('listNew');
                 all = JSON.parse(all);
                 all.splice(index,1);
                 localStorage.setItem('listNew',JSON.stringify(all));
             }
         })
         //分析：修改  表单（加结构）  点击修改 当前行的内容要到你的修改表单中  修改内容  再保存   
         //table跟新新的内容   localStorage中的内容也要更新
         //1.点击修改  当前行的内容要到你的修改表单中
         table.addEventListener('click',function(e){
            var event = e || window.event;
            var target = event.target ||event.srcElement;
            if(target.className == 'edit'){
                var tr = target.parentNode.parentNode;
                index = tr.rowIndex-1;
                var all = localStorage.getItem('listNew');
                all = JSON.parse(all);
                console.log(all[index]);
                exampleNameEdit.value = all[index].name;
                exampleTelEdit.value = all[index].tel;
                exampleEmailEdit.value = all[index].email;
            }
         })
         //修改并保存
         //修改  找objEdit   更改页面table  replaceChild(new,old)   splice(index,1,objEdit)
         saveEdit.onclick = function(e){
             e.preventDefault();
             var objEdit = {};
            //  console.log(index);
            objEdit.name =  exampleNameEdit.value;
            objEdit.tel = exampleTelEdit.value;
            objEdit.email = exampleEmailEdit.value;
            var newNode = document.createElement('tr');
            var str = `
                        <td>${objEdit.name}</td>
                        <td>${objEdit.tel}</td>
                        <td>${objEdit.email}</td>
                        <td>
                            <button class="delete">删除</button>
                            <button class="edit">修改</button>
                        </td>`
            newNode.innerHTML = str;
            // console.log(tbo.rows[index])
            var oldNode = tbo.rows[index]
            tbo.replaceChild(newNode,oldNode);
            var all = localStorage.getItem('listNew');
            all = JSON.parse(all);
            all[index] = objEdit;
            console.log(all);
            localStorage.setItem('listNew',JSON.stringify(all));
         }

   
</script>
</html>